<template>
	<view class="race">
		<view class="race-title" style="color: #1BA0FF;">管理比赛记录</view>
		<!-- 日期选择器 -->
		<view class="uni-list">
			<view class="uni-list-cell" style="display: flex; padding: 30rpx 0rpx;">
				<view class="uni-list-cell-left">
					选择日期:
				</view>
				<view class="uni-list-cell-db" style="margin-left: 20rpx;">
					<!-- 选择器组件 -->
					<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
						<view class="uni-input">{{date}}</view>
					</picker>
				</view>
			</view>
		</view>


		<!-- 比赛记录 -->
		<view class="race-list">
			<view class="ul" v-if="arr.length != 0">
				<view class="li" v-for="(item,index) in arr">
					<!-- 删除组件 -->
					<view class="delete-race" @click="removeOneInfo(item._id)">
						<!-- 删除 -->
						<image class="icon" src="/static/i-delete.png" mode="widthFix"></image>
					</view>
					<view class="li-top" @click="showChapter(index)">
						<view class="red">{{item.red_team}}</view>
						<view class="score">
							<text class="text">{{item.red_total}}</text>
							<text class="text">-</text>
							<text class="text">{{item.blue_total}}</text>
						</view>
						<view class="blue">{{item.blue_team}}</view>
					</view>
					<view class="li-bottom" @click="showChapter(index)">{{item.datetime}}</view>
					<!-- 下拉列表 -->
					<view :class="['li-list', item.xxx ?'':'hide']">
						<view class="list-list-opt" v-for="opt in item.result">
							<view class="item-title">{{opt.chapter}}</view>
							<view class="item-box">
								<view class="item-box-left">
									<view>得分:{{opt.red.score}}</view>
									<view>犯规次数:{{opt.red.foul}}</view>
									<view>暂停次数:{{opt.red.pauseCount}}</view>
								</view>
								<view class="item-box-right">
									<view>得分:{{opt.blue.score}}</view>
									<view>犯规次数:{{opt.blue.foul}}</view>
									<view>暂停次数:{{opt.blue.pauseCount}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="message" v-else>
				暂无比赛记录~~~
			</view>
		</view>

		<!--分页器 -->
		<view class="race-page" v-if="num != 0">
			<view class="ul">
				<view v-for="(page) in num" :class="['li', {active: current==page}]"
					@click="pageRaceInfoListFn(page, size)">
					{{page}}
				</view>
			</view>
		</view>


		<!-- 点击全部删除 -->
		<view class="all-select-delete" @click="removeAllInfo" v-if="num != 0">
			删除该页比赛记录
		</view>

		<!-- 遮罩层 -->
		<view class="mask" v-if="isHideMask">
			<view class="mask-wrapper">
				<view class="mask-box">
					<view class="mask-box-title">请输入密码(仅管理员)</view>
					<view class="mask-box-input">
						<input class="input" type="text" auto-focus="true" v-model="password">
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	// 组合式开发
	import {
		ref,
		computed,
		watch
	} from 'vue';

	// 导入查询云数据的函数
	import {
		getRaceInfoList,
		queryDateRaceInfoList,
		pageRaceInfoList,
		pageRaceInfoCount,
		removeRaceInfo
	} from '../../db/index'


	// 定义数组记录每一场比赛信息
	const arr = ref([])

	// 变量记录总数量
	let total = ref(0); // 总数量
	let size = ref(5); // 数量
	let num = ref(0); // 多少页
	let current = ref(1); // 页码
	
	const isHideMask = ref(true);
	const password = ref('');
	
	// 侦听器
	watch(password, (newPassword)=> {
		// console.log("--->",newPassword)
		if(newPassword.length == 6) {
			if(newPassword == '123456'){
				isHideMask.value = false;
			}
			else {
				uni.showToast({
					title:'你怕不是管理员吧!',
					icon:'none'
				})
				password.value = "";
			}
		}
	})

	// 选择器对应的属性和方法
	const getDate = (type) => {
		const date = new Date();
		let year = date.getFullYear();
		let month = date.getMonth() + 1;
		let day = date.getDate();

		if (type === 'start') {
			year = year - 10;
		} else if (type === 'end') {
			year = year + 10;
		}
		month = month > 9 ? month : '0' + month;
		day = day > 9 ? day : '0' + day;
		return `${year}/${month}/${day}`;
	}
	const currentDate = getDate({
		format: true
	})
	const date = ref(currentDate)
	const startDate = computed(() => {
		return getDate('start');
	})
	const endDate = computed(() => {
		return getDate('end');
	})

	// 选择日期
	const bindDateChange = (e) => {
		date.value = e.detail.value;

		// 分页的初始值为1 
		current.value = 1;
		pageRaceInfoListFn(current.value, size.value);
		// 切换日期
		pageRaceInfoCountFn();
	}


	// 获取当前日期比赛记录总数量
	const pageRaceInfoCountFn = async () => {
		await pageRaceInfoCount(date.value)
			.then(
				res => {
					// console.log("总数量:", res)
					total.value = res.total;
					num.value = Math.ceil(res.total / size.value)
				}
			)
	}


	// 编写一个分页的函数
	const pageRaceInfoListFn = async (page, pageSize) => {
		uni.showLoading({
			title: '正在查询..'
		})
		// 给页码赋值
		current.value = page;
		// 根据日期、页码、数量
		await pageRaceInfoList(date.value, page, pageSize)
			.then(
				data => {
					// 数据更新，页面变化
					arr.value = data;
				}
			)
		uni.hideLoading();
	}


	// 获取比赛记录
	const infoList = async () => {
		uni.showLoading({
			title: '正在加载...'
		})
		await getRaceInfoList().then(
			data => {
				// 采用vue3的 setup语法。 所以需要通过响应对象.value
				arr.value = data;
				num.value = Math.ceil(arr.value.length / size.value)
			}
		)
		uni.hideLoading();
	}

	// 初始化
	// infoList();

	// 获取当前日期总数量
	pageRaceInfoCountFn();
	// 显示当前日期的第一页数据
	pageRaceInfoListFn(current.value, size.value);


	// 编写显示或隐藏每一节数据的方法 （手风琴效果）
	const showChapter = (index) => {
		// console.log("比赛索引值:", index);
		if (arr.value[index].xxx == undefined) {
			arr.value[index].xxx = true;
		} else {
			arr.value[index].xxx = undefined;
		}
		console.log(arr.value[index].xxx);
	}


	// 编写删除比赛记录的方法
	const removeOneInfo = (id) => {
		wx.showModal({
			title: "温馨提示",
			content: "确定删除该记录?",
			async success(res) {
				if (res.confirm) {
					await removeRaceInfo(id)
						.then(
							result => {
								console.log("删除结果:", result);
								if (result.errCode == 0) {
									// 保留除了删掉的记录
									let newArr = arr.value.filter(item => {
										return item._id != id
									})
									arr.value = newArr;
								} else {
									uni.showToast({
										title: "删除失败",
										icon: 'error'
									})
								}
							}
						)
				}
			}
		})
	}


	// 编写删除比赛记录的方法(全部)
	const removeAllInfo = (id) => {
		wx.showModal({
			title: "温馨提示",
			content: "确定删除全部记录?",
			async success(res) {
				if (res.confirm) {
					for (let i = 0; i < arr.value.length; i++) {
						// 每循环依次删除比赛记录
						await removeRaceInfo(arr.value[i]._id)
							.then(
								result => {
									// console.log("删除结果:",result);
									if (result.errCode == 0) {
										// 保留除了删掉的记录
									} else {
										uni.showToast({
											title: "删除失败",
											icon: 'error'
										})
									}
								}
							)
					}

					// 循环结束（重新初始化）
					// 获取当前日期总数量
					pageRaceInfoCountFn();
					// 显示当前日期的第一页数据
					pageRaceInfoListFn(current.value, size.value);
				}
			}
		})
	}
</script>

<style lang="scss">
	@import "../../common/style/list.scss";
	.mask {
		width: 100%;
		height: 100%;
		position: fixed;
		z-index: 10;
		top: 0;
		left: 0;
		background-color: rgba(0, 0, 0, 1);
		.mask-wrapper {
			width: 100%;
			height: 100%;
			background-color: rgba(27, 160, 255, 1);
			display: flex;
			justify-content: center;
			align-items: center;
			.mask-box {
				background-color: #FFFFFF;
				padding: 50rpx 30rpx;
				width: 90%;
				box-sizing: border-box;
				text-align: center;
				border-radius: 10rpx;
				.input {
					height: 80rpx;
					width: 100%;
					background-color: #f0f0f0;
					margin-top: 20rpx;
				}
			}
		}
	}
	.all-select-delete {
		width: 100%;
		height: 90rpx;
		background-color: #ffffff;
		border: 1px solid #1BA0FF;
		color: #1BA0FF;
		margin: 20rpx 0rpx;
		text-align: center;
		line-height: 90rpx;
		border-radius: 10rpx;
	}

	.race {
		.race-page {
			.ul {
				.li.active {
					background-color: #1BA0FF;
					border: 1px solid #1BA0FF;
				}
			}
		}

		.race-list {
			.ul {
				.li {
					background-color: transparent;
					border: 1px solid #1BA0FF;
					position: relative;

					.delete-race {
						position: absolute;
						top: 20rpx;
						right: 20rpx;
						color: #f00;

						.icon {
							width: 50rpx;
							height: 50rpx;
						}
					}

					.li-top {
						.text {
							color: #000;
						}
					}

					.li-bottom {
						color: #707070;
					}
				}
			}
		}
	}
</style>